<template>
  <div class="w-full">
    <div>
      <breadcrumb :parentName="parentName" :childrenName="childrenName"></breadcrumb>
    </div>
    <div class="w-full bg-white mt-[15px] pt-[10px] px-[25px] relative pb-[60px]">
      <div v-if="!markFlag">
        <search
          :getQueryDataList="getQueryDataList"
          :productList="productList"
          @clickSearch="clickSearch"
          ref="searchRef"
        ></search>
      </div>
      <div class="flex items-center" v-if="markFlag">
        <el-select
          v-model="markVal"
          placeholder="请选择批改类型"
          style="width: 240px; height: 28rpx"
        >
          <el-option
            v-for="item in markOptions"
            v-show="item.show"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div
          @click="addMark"
          class="w-[72px] h-[30px] flex justify-center items-center text-[13px] text-white bg-[#EF6800] border-[#EF6800] rounded-[4px] border cursor-pointer ml-[10px]"
        >
          新增批改
        </div>
      </div>
      <div class="w-full h-[1px] bg-[#ECECEC] mt-[15px] mb-[15px]"></div>
      <div class="w-full flex justify-end" v-if="route.query.parentIndex == 0">
        <!-- <div
          v-if="route.query.type == 0"
          class="w-[70px] h-[30px] font-bold bg-[#EF6800] rounded-[5px] text-white text-[14px] flex justify-center items-center cursor-pointer"
        >
          付款
        </div> -->
        <div
          @click="deleteDo"
          v-if="route.query.type == 0 || route.query.type == 2"
          class="ml-[20px] w-[70px] h-[30px] border border-[#EF6800] rounded-[5px] text-[#EF6800] text-[14px] flex justify-center items-center cursor-pointer"
        >
          批量删除
        </div>
        <div
          @click="daochu"
          class="ml-[20px] w-[70px] h-[30px] border border-[#EF6800] rounded-[5px] text-[#EF6800] text-[14px] flex justify-center items-center cursor-pointer"
        >
          导出
        </div>
      </div>

      <div class="w-full mt-[15px]">
        <tableItem
          :table="tableData"
          ref="tableItemRef"
          @getData="getData"
          @select="select"
          @selectAll="selectAll"
        >
        </tableItem>
      </div>

      <div class="absolute bottom-[0] w-full ml-[-25px]">
        <currentPage
          :current_page="current_page"
          :last_page="last_page"
          :per_page="per_page"
          :total="total"
          :total_price="total_price"
          @back="back"
          @up="up"
        ></currentPage>
      </div>
    </div>
    <div>
      <el-dialog v-model="dialogVisible" @close="handleClose">
        <template #header>
          <div class="flex items-center">
            <div class="w-[3px] h-[18px] bg-[#EF6800]"></div>
            <div class="text-[18px] ml-[8px]">{{ markVal }}</div>
          </div>
        </template>
        <template #default>
          <div class="p-[30px]" v-if="markState == 1">
            <div>
              <el-table
                height="500"
                :data="tableData"
                type="selection"
                class="w-full"
                :header-cell-style="{
                  background: '#FEF0E6',
                  color: '#EF6800',
                  'text-align': 'center',
                }"
                highlight-current-row
                @select="select"
                @select-all="selectAll"
                ref="tableRef"
              >
                <el-table-column prop="order_no" label="类型" align="center">
                </el-table-column>
                <el-table-column prop="product_name" label="姓名" align="center">
                </el-table-column>

                <el-table-column prop="create_time" label="身份证号" align="center">
                </el-table-column>

                <el-table-column prop="total_price" label="性别" align="center">
                </el-table-column>
              </el-table>
            </div>
            <div class="mt-[50px] w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="markNext"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                下一步
              </div>
            </div>
          </div>
          <!-- 批改投保人 -->
          <div v-if="markState == 2" class="w-full">
            <div class="w-full rounded-[5px] p-[15px] bg-[#F9F9F9]">
              <div class="text-[12px]">
                <span class="text-[12px]">原投保人：</span>
                <span class="text-[#5A5A5A] ml-[40px]">{{ Info.insure.name }}</span>
              </div>
              <div class="mt-[15px] text-[12px]">
                <span>原身份证号：</span>
                <span class="text-[#5A5A5A] ml-[28px]">{{ Info.insure.card_no }}</span>
              </div>
            </div>
            <div class="">
              <div class="mt-[30px] flex mb-[20px]">
                <div>投保人类型</div>
                <div class="flex">
                  <div class="ml-[40px] flex items-center" @click="clicktab(0)">
                    <el-image
                      v-if="pdParam.insure.insure_type == '单位'"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">单位</div>
                  </div>
                  <div class="ml-[40px] flex items-center" @click="clicktab(1)">
                    <el-image
                      v-if="pdParam.insure.insure_type == '个人'"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">个人</div>
                  </div>
                </div>
              </div>
              <el-form
                label-width="auto"
                label-position="left"
                :model="pdParam.insure"
                :rules="rules"
                ref="rulseRef"
                style="max-width: 600px"
              >
                <el-form-item :label="insureName" prop="name">
                  <el-input v-model="pdParam.insure.name" />
                </el-form-item>
                <el-form-item label="证件类型" prop="card_type">
                  <el-input v-model="pdParam.insure.card_type" :disabled="true" />
                </el-form-item>
                <el-form-item label="证件号码" prop="card_no">
                  <el-input v-model="pdParam.insure.card_no" />
                </el-form-item>
                <el-form-item
                  label="联系人姓名"
                  prop="contact"
                  v-if="pdParam.insure.insure_type == '单位'"
                >
                  <el-input v-model="pdParam.insure.contact" />
                </el-form-item>
                <el-form-item label="手机号码" prop="contact_mobile">
                  <el-input v-model="pdParam.insure.contact_mobile" />
                </el-form-item>
                <el-form-item label="邮箱" prop="mailbox">
                  <el-input v-model="pdParam.insure.mailbox" />
                </el-form-item>
                <el-form-item
                  prop="address"
                  label="投保区域地址"
                  v-if="route.query.bx_id == 7"
                >
                  <el-input v-model="pdParam.insure.address" />
                </el-form-item>
              </el-form>
            </div>
            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(2)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
          <!-- 批增被保人 -->
          <div v-if="markState == 3">
            <div class="">
              <div class="mt-[30px] flex mb-[20px]">
                <div>投保人类型</div>
                <div class="flex">
                  <div class="ml-[40px] flex items-center" @click="clicktab(0)">
                    <el-image
                      v-if="pdParam.insured.type == 1"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">单位</div>
                  </div>
                  <div class="ml-[40px] flex items-center" @click="clicktab(1)">
                    <el-image
                      v-if="pdParam.insured.type == 2"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">个人</div>
                  </div>
                </div>
              </div>
              <el-form
                label-width="auto"
                label-position="left"
                :model="pdParam.insured"
                ref="rulseRef"
                :rules="rules"
                style="max-width: 600px"
              >
                <el-form-item label="附加被保人性质" prop="nature">
                  <el-select
                    placeholder="请选择"
                    v-model="pdParam.insured.nature"
                    @change="selectChnageXz"
                  >
                    <el-option
                      v-for="(items, key) in selectxzList"
                      :key="key"
                      :label="items"
                      :value="items"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item :label="insuredName" prop="name">
                  <el-input v-model="pdParam.insured.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="证件类型" prop="card_type">
                  <el-input v-model="pdParam.insured.card_type" :disabled="true" />
                </el-form-item>
                <el-form-item label="证件号码" prop="card_no">
                  <el-input v-model="pdParam.insured.card_no" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="pdParam.insured.mobile" placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(3)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
          <!-- 批改被保人 -->
          <div class="p-[30px]" v-if="markState == 4 && !pgShow">
            <div>
              <el-table
                height="500"
                :data="insuredData"
                type="selection"
                class="w-full"
                :header-cell-style="{
                  background: '#FEF0E6',
                  color: '#EF6800',
                  'text-align': 'center',
                }"
                highlight-current-row
                @select="pdSelect($event, 4)"
                @select-all="selectAll"
                ref="tableRef"
              >
                <el-table-column type="selection" align="center"> </el-table-column>

                <el-table-column prop="nature" label="附加被保人性质" align="center">
                </el-table-column>
                <el-table-column label="单位/个人" align="center">
                  <template #default="scope">
                    <div>
                      <span v-if="scope.row.type == 1">单位</span>
                      <span v-if="scope.row.type == 2">个人</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名/单位名称" align="center">
                </el-table-column>
                <el-table-column
                  prop="card_no"
                  label="身份证号/统一信用代码"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="mt-[50px] w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="markNext"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                下一步
              </div>
            </div>
          </div>
          <!-- 批减被保人 -->
          <div class="p-[30px]" v-if="markState == 5">
            <div>
              <el-table
                height="500"
                :data="insuredData"
                type="selection"
                class="w-full"
                :header-cell-style="{
                  background: '#FEF0E6',
                  color: '#EF6800',
                  'text-align': 'center',
                }"
                highlight-current-row
                @select="pdSelect($event, 5)"
                ref="tableRef"
              >
                <el-table-column type="selection" align="center"> </el-table-column>

                <el-table-column prop="nature" label="附加被保人性质" align="center">
                </el-table-column>
                <el-table-column label="单位/个人" align="center">
                  <template #default="scope">
                    <div>
                      <span v-if="scope.row.type == 1">单位</span>
                      <span v-if="scope.row.type == 2">个人</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名/单位名称" align="center">
                </el-table-column>
                <el-table-column
                  prop="card_no"
                  label="身份证号/统一信用代码"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="mt-[50px] w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="pdDelete"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                删除
              </div>
            </div>
          </div>
          <!-- 批改工程信息 -->
          <div v-if="markState == 6">
            <div class="w-full rounded-[5px] p-[15px] bg-[#F9F9F9]">
              <el-form
                label-width="auto"
                label-position="left"
                :model="formData"
                style="max-width: 600px"
              >
                <el-form-item label="原工程造价">
                  <div>
                    {{ Info.treetop.price }}
                  </div>
                </el-form-item>
                <el-form-item label="原工程名称">
                  <div>
                    {{ Info.treetop.name }}
                  </div>
                </el-form-item>
                <el-form-item label="工程地址">
                  <div>
                    {{ Info.treetop.province }}-{{ Info.treetop.city }}-{{
                      Info.treetop.area
                    }}
                  </div>
                </el-form-item>
                <el-form-item label="施工详细地址">
                  <div>
                    {{ Info.treetop.address }}
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-form
                label-width="auto"
                label-position="left"
                ref="rulseRef"
                :rules="rules"
                :model="pdParam.treetop"
                style="max-width: 600px"
              >
                <!-- <el-form-item label="工程造价" v-if="pdParam.treetop.price">
                  <el-input v-model="pdParam.treetop.price" />
                </el-form-item> -->
                <el-form-item label="工程名称" prop="name">
                  <el-input v-model="pdParam.treetop.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="工程地址" prop="province">
                  <div class="flex w-full">
                    <div class="flex w-[180px]">
                      <el-select v-model="pdParam.treetop.province" placeholder="请选择">
                        <el-option
                          @click="handleProvinceSelect(item)"
                          v-for="item in regionData"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="ml-[5px] whitespace-nowrap">省/直辖市</div>
                    </div>
                    <!-- :disabled="!address!.province || cityList!.length == 0" -->
                    <div class="flex flex-1 ml-[10px]">
                      <el-select v-model="pdParam.treetop.city" placeholder="请选择">
                        <el-option
                          @click="handleCitySelect(item)"
                          v-for="item in cityList"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                      <span class="ml-[5px]">市</span>
                    </div>
                    <div class="flex flex-1 ml-[10px]">
                      <el-select v-model="pdParam.treetop.area" placeholder="请选择">
                        <el-option
                          @click="handleAreaSelect(item)"
                          v-for="item in areaList"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <span class="ml-[5px]">区</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item prop="address" label="施工详细地址">
                  <el-input
                    v-model="pdParam.treetop.address"
                    placeholder="请输入详细地址"
                  />
                  <!-- <div class="mt-[20px] w-full">
                    <el-input
                      v-model="pdParam.treetop.room_no"
                      placeholder="请输入商铺号"
                    />
                  </div> -->
                </el-form-item>
                <el-form-item prop="room_no" label="商铺号">
                  <div class="w-full">
                    <el-input
                      v-model="pdParam.treetop.room_no"
                      placeholder="请输入商铺号"
                    />
                  </div>
                </el-form-item>
                <!-- <el-form-item label="活动地址">
                  <el-select>
                    <el-option @click="handleAreaSelect(item)" v-for="item in areaList" :label="item.label"
                      :value="item.value" />
                  </el-select>

                </el-form-item> -->
              </el-form>
            </div>
            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(6)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
          <!-- 批改地址 -->
          <div v-if="markState == 7">
            <div class="w-full rounded-[5px] p-[15px] bg-[#F9F9F9]">
              <el-form
                label-width="auto"
                label-position="left"
                :model="formData"
                style="max-width: 600px"
              >
                <el-form-item label="原地址信息">
                  <div>
                    {{ Info.treetop.province }}-{{ Info.treetop.city }}-{{
                      Info.treetop.area
                    }}
                  </div>
                </el-form-item>
                <el-form-item label="原详细地址">
                  <div>
                    {{ Info.treetop.address }}
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="mt-[20px]">
              <el-form
                ref="rulseRef"
                :rules="rules"
                label-width="120px"
                label-position="left"
                :model="pdParam.treetop"
                style="max-width: 600px"
              >
                <el-form-item label="工程地址" prop="province">
                  <div class="flex w-full">
                    <div class="flex w-[180px]">
                      <el-select v-model="pdParam.treetop.province" placeholder="请选择">
                        <el-option
                          @click="handleProvinceSelect(item)"
                          v-for="item in regionData"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="ml-[5px] whitespace-nowrap">省/直辖市</div>
                    </div>
                    <!-- :disabled="!address!.province || cityList!.length == 0" -->
                    <div class="flex-1 ml-[10px] flex">
                      <el-select v-model="pdParam.treetop.city" placeholder="请选择">
                        <el-option
                          @click="handleCitySelect(item)"
                          v-for="item in cityList"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                      <span class="ml-[5px]">市</span>
                    </div>
                    <div class="flex flex-1 ml-[10px]">
                      <el-select v-model="pdParam.treetop.area" placeholder="请选择">
                        <el-option
                          @click="handleAreaSelect(item)"
                          v-for="item in areaList"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <span class="ml-[5px]">区</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item prop="address" label="详细地址">
                  <el-input v-model="pdParam.treetop.address" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="room_no" label="商铺号">
                  <el-input v-model="pdParam.treetop.room_no" />
                </el-form-item>
              </el-form>
            </div>
            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(7)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
          <!-- 批改特约 -->
          <div v-if="markState == 8">
            <el-form
              label-width="auto"
              label-position="left"
              :model="pdParam"
              ref="rulseRef"
              :rules="rules"
              style="max-width: 600px"
            >
              <el-form-item prop="special_clause">
                <el-input
                  v-model="pdParam.special_clause"
                  :rows="10"
                  type="textarea"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>

            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(8)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
          <div v-if="markState == 4 && pgShow" class="w-full">
            <div class="w-full rounded-[5px] p-[15px] bg-[#F9F9F9]">
              <div class="text-[12px]">
                <span class="text-[12px]">原被保人：</span>
                <span class="text-[#5A5A5A] ml-[40px]">{{ Info.insured.name }}</span>
              </div>
              <div class="mt-[15px] text-[12px]">
                <span>原身份证号：</span>
                <span class="text-[#5A5A5A] ml-[28px]">{{ Info.insured.card_no }}</span>
              </div>
            </div>
            <div class="">
              <div class="mt-[30px] flex mb-[20px]">
                <div>被保人类型</div>
                <div class="flex">
                  <div class="ml-[40px] flex items-center" @click="clicktab(0)">
                    <el-image
                      v-if="pdParam.insured.type == 1"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">单位</div>
                  </div>
                  <div class="ml-[40px] flex items-center" @click="clicktab(1)">
                    <el-image
                      v-if="pdParam.insured.type == 2"
                      :src="getAssetsFile('home/active.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <el-image
                      v-else
                      :src="getAssetsFile('home/noactive.png')"
                      class="w-[18px] h-[18px] cursor-pointer"
                    ></el-image>
                    <div class="ml-[10px]">个人</div>
                  </div>
                </div>
              </div>
              <el-form
                label-width="auto"
                label-position="left"
                :model="pdParam.insured"
                ref="rulseRef"
                :rules="rules"
                style="max-width: 600px"
              >
                <el-form-item prop="nature" label="附加被保人性质">
                  <el-select
                    placeholder="请选择"
                    @change="selectChnageXz"
                    v-model="pdParam.insured.nature"
                  >
                    <el-option
                      v-for="(items, key) in selectxzList"
                      :key="key"
                      :label="items"
                      :value="items"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="name" :label="insuredName">
                  <el-input v-model="pdParam.insured.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="card_type" label="证件类型">
                  <el-input v-model="pdParam.insured.card_type" :disabled="true" />
                </el-form-item>
                <el-form-item prop="card_no" label="证件号码">
                  <el-input v-model="pdParam.insured.card_no" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="mobile" label="手机号">
                  <el-input v-model="pdParam.insured.mobile" placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <div class="w-full flex items-center justify-center">
              <div
                @click="dialogVisible = false"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] border border-[#ECECEC] text-[#5A5A5A] text-[12px] cursor-pointer"
              >
                取消
              </div>
              <div
                @click="submit(4)"
                class="w-[72px] h-[28px] flex items-center justify-center rounded-[3px] bg-[#EF6800] text-[white] text-[12px] ml-[20px] cursor-pointer"
              >
                确定
              </div>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watchEffect,
  reactive,
  onMounted,
  defineExpose,
  computed,
  inject,
  ComputedRef,
} from "vue";
import { useRoute } from "vue-router";
import breadcrumb from "@/components/breadcrumb/breadcrumb.vue";
import tableItem from "./tableItem.vue";
import currentPage from "./currentPage.vue";
import search from "./search.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import {
  orderIndex,
  orderGetQueryData,
  updateAddress,
  addInsuredB,
  getInsure,
  pdInsured,
  pdInsure,
  getInsureInfo,
  downloadOrder,
  pdOrderList,
  orderDel,
  specialclause,
  getProjectinfo,
  getArea,
  updateProjectinfo,
  insuredList,
  insuredDelete,
  pdIndex,
  pdList,
} from "@/utils/api";
import getAssetsFile from "@/utils/getImageurl.ts";
const route = useRoute();
const parentName = ref("");
const dialogVisible = ref(false);
const message = inject("message") as any;
const markState = ref(1);
const current_page = ref(0);
const last_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const total_price = ref<number>(0);
const param = reactive({
  data: {
    page: 1,
    brand_id: "",
    bx_id: "",
    start_time: "",
    end_time: "",
    order_no: "",
    name: "",
    state: 1, //1待支付2订单查询3订单修改4订单续保5已作废
    ids: [] as any,
    type: "",
    bd_no: "",
    card_no: "",
  },
});
const pdParam = reactive({
  order_id: "",
  special_clause: "",
  page: 1,
  treetop: {
    province: "",
    province_code: "",
    city: "",
    city_code: "",
    area: "",
    area_code: "",
    name: "",
    address: "",
    room_no: "",
  },
  address: {}, //地址信息
  insured: {
    type: "",
    nature: "",
    name: "",
    id: "",
    card_type: "",
    card_no: "",
    mobile: "",
  },
  insure: {
    address: "",
    card_no: "",
    card_type: "",
    contact: "",
    contact_mobile: "",
    insure_type: "",
    mailbox: "",
    name: "",
  },
}) as any;
const insuredData = ref([]) as any; //批改被保人列表
const insuredCardType = computed({
  get: () => {
    return route.query.mark;
  },
  set: () => {},
});
const Info = reactive({
  treetop: {
    price: "",
    name: "",
    province: "",
    city: "",
    area: "",
    address: "",
  },
  address: {}, //地址信息
  insured: {
    type: "",
    order_id: "",
    nature: "",
    name: "",
    id: "",
    card_type: "",
    card_no: "",
    mobile: "",
  },
  insure: {
    address: "",
    card_no: "",
    card_type: "",
    contact: "",
    contact_mobile: "",
    id: "",
    insure_type: "",
    mailbox: "",
    name: "",
  },
});
const type = ref(0); //0是单位1是个人
const formData = reactive({
  name: "",
});
const markFlag = computed({
  get: () => {
    if (route.query.mark && route.query.type == 0) {
      return true;
    }
    return false;
  },
  set: () => {},
});
pdParam.order_id = computed({
  get: () => {
    return route.query.order_id;
  },
  set: () => {},
});
const insureName = computed({
  get: () => {
    if (pdParam.insure.insure_type == "单位") {
      return "单位名称";
    }

    return "姓名";
  },
  set: () => {},
});
const insuredName = computed({
  get: () => {
    if (pdParam.insured.type == 1) {
      return "单位名称";
    }
    return "姓名";
  },
  set: () => {},
});
const markVal = ref(""); //批改
// 批改选项
const markOptions = ref([
  {
    value: "批改投保人",
    label: "批改投保人",
    show: true,
  },
  {
    value: "批增被保人",
    label: "批增被保人",
    show: true,
  },
  {
    value: "批改被保人",
    label: "批改被保人",
    show: true,
  },
  {
    value: "批减被保人",
    label: "批减被保人",
    show: true,
  },
  {
    value: "批改工程信息",
    label: "批改工程信息",
    show: true,
  },
  {
    value: "批改地址信息",
    label: "批改地址信息",
    show: true,
  },
  {
    value: "批改特约",
    label: "批改特约",
    show: true,
  },
]);
const rules = ref({
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  card_no: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
  card_type: [{ required: true, message: "请选择证件类型", trigger: "blur" }],
  contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contact_mobile: [{ required: true, message: "请输入联系人手机号", trigger: "blur" }],
  insure_type: [{ required: true, message: "请选择投保人性质", trigger: "blur" }],
  mailbox: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  nature: [{ required: true, message: "请输入被保人性质", trigger: "blur" }],
  room_no: [{ required: true, message: "请输入商铺号", trigger: "blur" }],
  province: [{ required: true, message: "请输入地址", trigger: "blur" }],
  special_clause: [{ required: true, message: "请输入特约内容", trigger: "blur" }],
});
const rulseRef = ref(null) as any;
const ids = ref([] as any);
interface RegionData {
  label: string;
  value: string;
}
const regionData = ref([]) as any;
const tableData = ref([] as any[]);
const childrenName = ref("");
const searchRef = ref<InstanceType<typeof search>>();
const tableItemRef = ref<InstanceType<typeof tableItem>>();
const getQueryDataList = ref([] as any[]); //供货商数据
const productList = ref([] as any[]); //产品数据
const pgShow = ref(false); //批改被保人填写页面显示
const deleteArr = ref([]) as any;
const selectArr = ref([]) as any;
const selectxzList = ref([]) as any;
onMounted(() => {
  // getData();
  getAddress();
});

//批减被保人
const pdDelete = async () => {
  if (selectArr.value.length != 1) {
    message.warning("只能批减一位被保人");
    return;
  }

  let param = {
    order_id: pdParam.order_id,
    id: selectArr.value[0].id,
  };
  const res = await insuredDelete(param);
  if (res.code == 1) {
    message.success(res.msg);
    getData();
  } else {
    message.warning(res.msg);
  }
  markVal.value = "";
  dialogVisible.value = false;
};
//批单选中事件
const pdSelect = (arr: any[], index: number) => {
  console.log(index);
  selectArr.value = arr;
};
//获取省市区地址
const getAddress = async () => {
  const res = await getArea("");
  regionData.value = res.msg;
};
//切换省份函数
const handleProvinceSelect = (v: any) => {
  // address.city = "";
  // address.area = "";
  pdParam.treetop.province = v.label;
  pdParam.treetop.province_code = v.value;
  pdParam.treetop.city = "";
  pdParam.treetop.city_code = "";
  pdParam.treetop.area = "";
  pdParam.treetop.area_code = "";
};
//切换城市函数
const handleCitySelect = (val: any) => {
  // address.area = "";
  pdParam.treetop.city = val.label;
  pdParam.treetop.city_code = val.value;
  pdParam.treetop.area = "";
  pdParam.treetop.area_code = "";
};
//切换地区函数
const handleAreaSelect = (value: any) => {
  pdParam.treetop.area = value.label;
  pdParam.treetop.area_code = value.value;
};
interface CityList {
  label: string;
  value: string;
}
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!pdParam.treetop.province) {
    return [];
  }
  if (regionData.value.length == 0) {
    return [];
  } else {
    let temp = regionData.value.find((item: any) => {
      return item.label == pdParam.treetop.province;
    });

    return temp!.children ? temp!.children : [];
  }
});
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!pdParam.treetop.province || !pdParam.treetop.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    let temp = cityList.value.find((item: any) => {
      return item.label == pdParam.treetop.city;
    });

    if (temp) {
      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});
const submit = async (val: number) => {
  if (!rulseRef.value) return;

  await rulseRef.value.validate((valid: any, fields: any) => {
    console.log(pdParam.special_clause);
    if (valid) {
      rulesFun(val);
    } else {
      for (let i in fields) {
        message.warning(fields[i][0].message);
      }
    }
  });
};
const rulesFun = async (val: any) => {
  let param = {
    order_id: pdParam.order_id,
    ...pdParam.treetop,
  };
  //8批改特约
  switch (val) {
    case 2:
      //批改投保人
      const r2 = await pdInsure({ order_id: pdParam.order_id, ...pdParam.insure });
      if (r2.code == 1) {
        message.success(r2.msg);
      } else {
        message.warning(r2.msg);
      }
      break;
    case 3:
      //批增被保人
      let p = {
        order_id: pdParam.order_id,
        card_no: pdParam.insured.card_no,
        card_type: pdParam.insured.card_type,
        mobile: pdParam.insured.mobile,
        name: pdParam.insured.name,
        nature: pdParam.insured.nature,
        type: pdParam.insured.type,
      } as any;

      //批增被保人
      const r3 = await addInsuredB(p);
      if (r3.code == 1) {
        message.success(r3.msg);
      } else {
        message.warning(r3.msg);
      }
      break;
    case 4:
      //批改被保人
      const r4 = await pdInsured({ order_id: pdParam.order_id, ...pdParam.insured });
      if (r4.code == 1) {
        message.success(r4.msg);
      } else {
        message.warning(r4.msg);
      }
      break;
    case 5:
      break;
    case 6:
      //批改工程信息
      const r = await updateProjectinfo(param);
      if (r.code == 1) {
        message.success(r.msg);
      } else {
        message.warning(r.msg);
      }

      break;
    case 7:
      //批改地址信息
      const r7 = await updateAddress(param);
      if (r7.code == 1) {
        message.success(r7.msg);
      } else {
        message.warning(r7.msg);
      }

      break;
    case 8:
      // if (pdParam.special_clause == undefined || !pdParam.special_clause) {
      //   message.warning("请填写特约信息");
      //   return;
      // }
      //批改特约
      const res = await specialclause({
        order_id: pdParam.order_id,
        special_clause: pdParam.special_clause,
      });
      if (res.code == 1) {
        message.success(res.msg);
      } else {
        message.warning(res.msg);
      }
      break;

    default:
      break;
  }
  dialogVisible.value = false;
  getData();
  markVal.value = "";
};
//选择单位还是个人
const clicktab = (val: number) => {
  type.value = val;
  //批改投保人
  if (markState.value == 2) {
    if (val == 0) {
      pdParam.insure.insure_type = "单位";
      pdParam.insure.card_type = "统一信用代码";
    } else {
      pdParam.insure.insure_type = "个人";
      pdParam.insure.card_type = "身份证";
    }
  }
  //批增被保人/批改

  if (markState.value == 4 || markState.value == 3) {
    if (val == 0) {
      pdParam.insured.type = 1;
      pdParam.insured.card_type = "统一信用代码";
    } else {
      pdParam.insured.type = 2;
      pdParam.insured.card_type = "身份证";
    }
  }
};
//下一步
const markNext = async () => {
  //是批改被保人
  if (markState.value == 4) {
    if (selectArr.value.length != 1) {
      message.warning("只能批改一位被保人");
      return;
    }
    pgShow.value = true;

    for (let i in pdParam.insured) {
      if (selectArr.value[0][i] != undefined || selectArr.value[0][i] != "")
        pdParam.insured[i] = selectArr.value[0][i];
    }

    const res = await getInsureInfo({ id: route.query.bx_id });
    selectxzList.value = res.msg.nature;
    Info.insured = JSON.parse(JSON.stringify(selectArr.value[0]));
  }
};
//新增批改
const addMark = async () => {
  if (!markVal.value) {
    message.warning("请选择批改类型");
    return;
  }

  selectArr.value = [];
  dialogVisible.value = true;
  switch (markVal.value) {
    case "批改投保人":
      markState.value = 2;
      const r2 = await getInsure({ order_id: pdParam.order_id });
      for (let i in pdParam.insure) {
        pdParam.insure[i] = r2.msg[i];
      }
      Info.insure = JSON.parse(JSON.stringify(r2.msg));
      break;
    case "批增被保人":
      markState.value = 3;
      pdParam.insured.type = 1;
      pdParam.insured.card_type = "统一信用代码";
      pdParam.insured.nature = "";
      pdParam.insured.name = "";
      pdParam.insured.card_no = "";
      pdParam.insured.mobile = "";

      const res = await getInsureInfo({ id: route.query.bx_id });
      selectxzList.value = res.msg.nature;
      break;
    case "批改被保人":
      markState.value = 4;

      const r4 = await insuredList({ order_id: pdParam.order_id });
      insuredData.value = r4.msg;

      break;
    case "批减被保人":
      markState.value = 5;
      const r5 = await insuredList({ order_id: pdParam.order_id });
      insuredData.value = r5.msg;
      break;
    case "批改工程信息":
      markState.value = 6;
      getTreetop();
      break;
    case "批改地址信息":
      markState.value = 7;

      getTreetop();
      break;
    case "批改特约":
      markState.value = 8;
      pdParam.special_clause = "";
      break;
    default:
      break;
  }
  if (!rulseRef.value) return;
  rulseRef.value.clearValidate();
};
//获取标的要素
const getTreetop = async () => {
  const r7 = await getProjectinfo(pdParam);
  pdParam.treetop = r7.msg;
  Info.treetop = JSON.parse(JSON.stringify(r7.msg));
};
//关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  pgShow.value = false;
  regionData.value = [];
};
//选择附加被保人性质
const selectChnageXz = (val: any) => {
  console.log(val);
};
const getParentName = () => {
  switch (Number(route.query.parentIndex)) {
    case 0:
      parentName.value = "订单管理";

      break;
    case 1:
      parentName.value = "批单管理";
      break;
    case 2:
      parentName.value = "修改密码";
      break;

    default:
      break;
  }
  return name;
};
//选中事件
const select = (arr: any[]) => {
  total_price.value = 0;
  deleteArr.value = [];
  ids.value = [];
  arr.forEach((item: any) => {
    deleteArr.value.push(item.id);
    ids.value.push(item.id);
    total_price.value += Number(item.total_price);
  });
};
//全选
const selectAll = (arr: any[]) => {
  deleteArr.value = [];
  ids.value = [];
  total_price.value = 0;
  arr.forEach((item: any) => {
    deleteArr.value.push(item.id);
    ids.value.push(item.id);
    total_price.value += Number(item.total_price);
  });
};
//计算保费
const countCost = () => {
  total_price.value = 0;
  tableData.value.forEach((item: any) => {
    total_price.value += Number(item.total_price);
  });
};
//批量删除
const deleteDo = () => {
  ElMessageBox.confirm("确认要删除吗？", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await orderDel({ id: deleteArr.value });
      if (res.code == 1) {
        ElMessage({
          type: "success",
          message: res.msg,
        });
        getData();
      } else {
        ElMessage({
          type: "warning",
          message: res.msg,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const getChildrenName = () => {
  // param.data.state = Number(route.query.type) + 1;
  getParentName();
  switch (Number(route.query.parentIndex)) {
    case 0:
      //订单管理
      switch (Number(route.query.type)) {
        case 0:
          childrenName.value = "订单支付";
          param.data.state = 1;
          break;
        case 1:
          childrenName.value = "订单查询";
          param.data.state = 2;
          break;
        case 2:
          childrenName.value = "订单修改";
          param.data.state = 3;
          break;
        case 3:
          childrenName.value = "订单续保";
          param.data.state = 4;
          break;
        case 4:
          childrenName.value = "已作废";
          param.data.state = 5;
          break;
      }
      break;
    case 1:
      //批单管理
      switch (Number(route.query.type)) {
        case 0:
          childrenName.value = "批单录入";
          break;
        case 1:
          childrenName.value = "批单查询";

          break;
      }
      break;
    case 2:
      break;
  }
};
const getQueryData = async () => {
  const res = await orderGetQueryData("");

  getQueryDataList.value = res.msg.supplier;
  productList.value = res.msg.product;
};
getQueryData();
const getData = async () => {
  if (route.query.parentIndex == undefined && route.query.type == undefined) {
    route.query.parentIndex = 0;
    route.query.type = 0;
  }
  //获取订单数据
  if (route.query.parentIndex == 0) {
    const res = await orderIndex(param.data);
    tableData.value = res.msg.data;
    current_page.value = res.msg.current_page;
    per_page.value = res.msg.per_page;
    last_page.value = res.msg.last_page;
    total.value = res.msg.total;
    // countCost();
  }
  if (route.query.parentIndex == 1 && !route.query.mark) {
    const res = await pdOrderList(param.data);
    tableData.value = res.msg.data;
    current_page.value = res.msg.current_page;
    per_page.value = res.msg.per_page;
    last_page.value = res.msg.last_page;
    total.value = res.msg.total;
    //  countCost();
  }
  //获取单笔订单批改记录
  if (route.query.type == 0 && route.query.parentIndex == 1 && route.query.mark == 1) {
    const res = await pdIndex({ order_id: pdParam.order_id, page: pdParam.page });
    tableData.value = res.msg.data;
    current_page.value = res.msg.current_page;
    per_page.value = res.msg.per_page;
    last_page.value = res.msg.last_page;
    total.value = res.msg.total;
    if (route.query.bx_id == 7) {
      markOptions.value.forEach((item: any) => {
        if (item.label == "批改地址信息") {
          item.show = false;
        } else {
          item.show = true;
        }
      });
      //markOptions.value.splice(5, 1)
    } else if (route.query.bx_id == 8) {
      markOptions.value.forEach((item: any) => {
        if (item.label == "批改工程信息") {
          item.show = false;
        } else {
          item.show = true;
        }
      });
    } else {
      markOptions.value.forEach((item: any) => {
        item.show = true;
      });
    }

    //  countCost();
  }
  //获取所有批单记录
  if (route.query.type == 1 && route.query.parentIndex == 1) {
    const res = await pdList(param.data);
    tableData.value = res.msg.data;
    current_page.value = res.msg.current_page;
    per_page.value = res.msg.per_page;
    last_page.value = res.msg.last_page;
    total.value = res.msg.total;
    // countCost();
  }
  //total_price.value = res.msg.total_price;
};

const daochu = async () => {
  param.data.ids = ids.value;
  let query = JSON.stringify(param.data);
  // const res = await downloadOrder({ query: query });
  var url = "/seller/download/downloadOrder/query/" + query;
  window.open(url);
};
//搜索
const clickSearch = () => {
  param.data = searchRef.value?.Info as any;
  param.data.page = 1;
  getChildrenName();
  getData();
};
// 上一页
const back = () => {
  param.data.page--;
  pdParam.page--;
  getData();
};
//下一页
const up = () => {
  param.data.page++;
  pdParam.page++;
  getData();
};
watchEffect(() => {
  if (route.query.type) {
    // getParentName();
    getChildrenName();
    // getData();
  }
  if (route) {
    getData();
  }
});
defineExpose({
  param,
});
</script>
